/* ===================================================== */
/*                    نوار بالای صفحه                     */
/* ===================================================== */

.topbar{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:18px;

    padding:12px 20px;

    background:var(--jn-bg-1);

    border-bottom:1px solid rgba(var(--jn-overlay-rgb),.08);
}

/* هم‌راستا با کارت‌هایِ شیشه‌ایِ حالتِ روز: نوارِ بالا هم نیمه‌شفاف با جلوه‌ی تار می‌شه */
:root[data-theme="light"] .topbar{
    background:rgba(240,244,251,.62);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-color:rgba(255,255,255,.7);
}


/* ===================================================== */
/*                       لوگو                            */
/* ===================================================== */

.tb-logo{

    display:flex;

    align-items:baseline;

    gap:6px;

    text-decoration:none;

    color:inherit;

    cursor:pointer;

    flex:0 0 auto;
}

.tb-logo h2{

    margin:0;

    font-size:17px;

    font-weight:800;

    background:linear-gradient(90deg,var(--jn-purple-2),var(--jn-purple));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;
}

.tb-logo span{

    font-size:9.5px;

    color:var(--jn-text-3);

    letter-spacing:2px;
}


/* ===================================================== */
/*                    فاصله‌ی خالی                        */
/* ===================================================== */

.tb-spacer{

    flex:1;
}


/* ===================================================== */
/*                     زنگ اعلان‌ها                       */
/* ===================================================== */

.tb-bell{

    position:relative;

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(var(--jn-overlay-rgb),.03);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    font-size:15px;

    cursor:pointer;
}

.tb-bell .dot{

    position:absolute;

    top:6px;

    left:8px;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--jn-red);

    border:1.5px solid var(--jn-bg-1);
}


/* ===================================================== */
/*                  پنلِ اعلان‌ها                          */
/* ===================================================== */

.tb-bell-panel{

    position:fixed;

    width:320px;

    max-width:calc(100vw - 40px);

    max-height:360px;

    overflow-y:auto;

    background:var(--jn-bg-1);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:14px;

    box-shadow:0 20px 50px rgba(0,0,0,.5);

    z-index:60;

    display:none;

    direction:rtl;
}

:root[data-theme="light"] .tb-bell-panel{
    background:rgba(246,249,253,.85);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-color:rgba(255,255,255,.7);
}

.tb-bell-panel.show{

    display:block;
}

.tb-bell-panel-head{

    padding:14px 16px;

    font-size:13px;

    font-weight:700;

    color:var(--jn-text-1);

    border-bottom:1px solid rgba(var(--jn-overlay-rgb),.08);
}

.tb-notif-item{

    padding:12px 16px;

    border-bottom:1px solid rgba(var(--jn-overlay-rgb),.05);

    font-size:12.5px;

    color:var(--jn-text-2);

    line-height:1.7;
}

.tb-notif-item:last-child{

    border-bottom:none;
}

.tb-notif-item.unread{

    background:rgba(var(--jn-cyan-rgb),.05);
}

.tb-notif-time{

    display:block;

    margin-top:5px;

    font-size:11px;

    color:var(--jn-text-3);
}

.tb-notif-empty{

    padding:24px 16px;

    text-align:center;

    font-size:12.5px;

    color:var(--jn-text-3);
}


/* ===================================================== */
/*                    پروفایل کاربر                      */
/* ===================================================== */

.tb-user{

    display:flex;

    align-items:center;

    gap:9px;
}

.tb-avatar{

    width:34px;

    height:34px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--jn-cyan),var(--jn-purple));

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

    color:var(--jn-ink);
}

.tb-user .n{

    font-size:12.5px;

    font-weight:700;
}

.tb-user .s{

    font-size:10px;

    color:var(--jn-gold-text);
}

.tb-user-clickable{

    cursor:pointer;

    padding:4px 6px;

    border-radius:10px;

    transition:.2s;
}

.tb-user-clickable:hover{

    background:rgba(var(--jn-overlay-rgb),.06);
}


/* ===================================================== */
/*                  منویِ کاربر                          */
/* ===================================================== */

.tb-user-menu{

    position:fixed;

    min-width:180px;

    background:var(--jn-bg-1);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:14px;

    box-shadow:0 20px 50px rgba(0,0,0,.5);

    z-index:60;

    display:none;

    overflow:hidden;

    direction:rtl;
}

:root[data-theme="light"] .tb-user-menu{
    background:rgba(246,249,253,.85);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-color:rgba(255,255,255,.7);
}

.tb-user-menu.show{

    display:block;
}

.tb-user-menu-item{

    display:block;

    width:100%;

    padding:13px 16px;

    background:none;

    border:none;

    font-family:inherit;

    font-size:13px;

    font-weight:600;

    color:var(--jn-text-2);

    text-align:right;

    cursor:pointer;

    transition:.15s;
}

.tb-user-menu-item:hover{

    background:rgba(var(--jn-red-rgb),.1);

    color:var(--jn-red);
}


/* ===================================================== */
/*            دکمه‌ی «برگشت به بالا» (فقط موبایل)           */
/* ===================================================== */

.scroll-top-btn{
    display:none;
    position:fixed;
    left:16px;
    bottom:16px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(var(--jn-cyan-rgb),.3);
    background:var(--jn-bg-1);
    color:var(--jn-cyan-text);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    z-index:32;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .2s, transform .2s;
}

@media(max-width:900px){
    .scroll-top-btn{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .scroll-top-btn.show{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

    /* نوارِ بالا هم مثلِ سایدبار با اسکرول جابه‌جا نمی‌شه */
    .topbar{
        position:fixed;
        top:0;
        right:0;
        left:0;
        z-index:31;
    }
}